<template>
	<view class="container" v-if="$store.getters.token || userInfo.uid">
		<!-- 头部 -->
		<view class="top">
			<!-- <view class="biaoti">个人中心</view> -->
			<view class="info">
				<text class="iconfont icon-shezhi" @click="goPersonalData()"></text>
				<view class="left">
					<img :src="userInfo.avatar" alt="">
				</view>
				<view class="right">
					<view class="user-name">
						<text class="name">{{userInfo.nickname}}</text>
						<view class="huiyuan" v-if="userInfo.level>0">{{userInfo.vipName}}</view>
					</view>
					<view class="detial"  v-if="userInfo.vip">
						到期时间：{{userInfo.endTime}} <br>
						会员证号：YCB-{{userInfo.uid}} <br>
						所属机构：{{userInfo.arvoAss.aname}}
						<!-- <view class="flex-jigou">
							<view class="flex-label">所属机构：</view>
							<view class="flex-value">{{userInfo.arvoAss.aname}}</view>
						</view> -->
					</view>
					<view class="detial" v-else>
						游客
					</view>

				</view>
			</view>

			<!-- 我的订单 -->
			<view class="item-box">
				<view class="header">
					<view class="left">我的订单</view>
					<view class="right">
						<view class="text" @click="toOrderList('-1','0')">全部订单</view>
						<view class="pic"><img src="@/static/images/icon-arrow.png" alt=""></view>
					</view>
				</view>
				<view class="bd">
					<view class="item" @click="toOrderList('0','1')">
						<view class="pic"><img src="@/static/images/icon-wait-pay.png" alt=""></view>
						<view class="text">待付款</view>
					</view>
					<view class="item" @click="toOrderList('4','2')">
						<view class="pic"><img src="../../../static/images/icon-payed.png" alt=""></view>
						<view class="text">已支付</view>
					</view>
					<view class="item" @click="toOrderList('-2','3')">
						<view class="pic"><img src="../../../static/images/icon-cancel.png" alt=""></view>
						<view class="text">已取消</view>
					</view>
				</view>
			</view>

			<!-- 会员特权 -->
			<view class="item-box">
				<view class="header">
					<view class="left">会员特权</view>

				</view>
				<view class="bd">
					<view class="item" @click="toJoin">
						<view class="pic"><img src="../../../static/images/icon-pay.png" alt=""></view>
						<view class="text">我要缴费</view>
					</view>
					<view class="item" @click="toInvoice">
						<view class="pic"><img src="../../../static/images/icon-record.png" alt=""></view>
						<view class="text">发票明细</view>
					</view>
					<!-- <view class="item">
						<view class="pic"><img src="../../../static/images/icon-certification.png" alt=""></view>
						<view class="text">会员证书</view>
					</view> -->
					<view class="item" @click="toActivityOrder">
						<view class="pic"><img src="../../../static/images/icon-sign-order.png" alt=""></view>
						<view class="text">报名订单</view>
					</view>
				</view>
			</view>

		</view>
	</view>

	<Authorization v-else />

</template>
<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		getUserInfo,
		getMenuUser,
		wxappAuth,
		bindingPhone,
		wxappBindingPhone,
		wxappGetUserInfo
	} from '@/api/user'
	import {
		isWeixin,
		VUE_APP_RESOURCES_URL,
		parseQuery,
		getProvider
	} from '@/utils'
	import SwitchWindow from '@/components/SwitchWindow'
	import Authorization from '@/pages/authorization/index'
	import cookie from '@/utils/store/cookie'

	const NAME = 'User'

	export default {
		name: NAME,
		components: {
			SwitchWindow,
			Authorization,
		},
		props: {},
		data: function() {
			return {
				canIUseGetUserProfile: false,
				MyMenus: [],
				switchActive: false,
				isWeixin: false,
			}
		},
		computed: mapGetters(['userInfo']),
		onLoad() {
			if (wx.getUserProfile) {
				this.canIUseGetUserProfile = true
			}
		},
		methods: {
			...mapMutations(['updateAuthorizationPage']),
			toLogin() {
				this.$yrouter.push('/pages/user/Login/index')
			},
			goReturnList() {
				this.$yrouter.push('/pages/order/ReturnList/index')
			},
			goMyOrder(type) {
				this.$yrouter.push({
					path: '/pages/order/MyOrder/index',
					query: {
						type,
					},
				})
			},
			toInvoice(){
				uni.navigateTo({
					url:'../invoice/index'
				})
			},
			toJoin(){
				uni.navigateTo({
					url:'/pages/join/index'
				})
			},
			toOrderList(status,index){
				uni.navigateTo({
					url:'/pages/orderList/index?status='+status+'&index='+index
				})
			},
			toActivityOrder(){
				uni.navigateTo({
					url:'/pages/activityOrder/index'
				})
			},
			goBindPhone() {
				this.$yrouter.push('/pages/user/BindingPhone/index')
			},
			goUserCoupon() {
				this.$yrouter.push('/pages/user/coupon/UserCoupon/index')
			},
			goIntegral() {
				this.$yrouter.push('/pages/user/signIn/Integral/index')
			},
			goUserPromotion() {
				this.$yrouter.push('/pages/user/promotion/UserPromotion/index')
			},
			goUserAccount() {
				this.$yrouter.push('/pages/user/UserAccount/index')
			},
			goPersonalData() {
				this.$yrouter.push('/pages/user/PersonalData/index')
			},
			getPhoneNumber(e) {
				// 判断一下这里是不是小程序 如果是小程序，走获取微信手机号进行绑定
				if (e.mp.detail.errMsg == 'getPhoneNumber:ok') {
					uni.showLoading({
						title: '绑定中',
					})
					wxappBindingPhone({
							encryptedData: e.mp.detail.encryptedData,
							iv: e.mp.detail.iv,
						})
						.then(res => {
							// this.User();
							this.$store.dispatch('userInfo', true)
							uni.hideLoading()
							uni.showToast({
								title: res.msg,
								icon: 'success',
								duration: 2000,
							})
						})
						.catch(error => {
							uni.hideLoading()
							this.$store.dispatch('userInfo', true)
							console.log(error)
							uni.showToast({
								title: error.msg || error.response.data.msg || error.response.data.message,
								icon: 'none',
								duration: 2000,
							})
						})
					// // 获取当前环境的服务商
					// uni.getProvider({
					//   service: "oauth",
					//   success: function (res) {
					//     // 此处可以排除h5
					//     if (res.provider) {
					//       uni.login({
					//         success: loginRes => {
					//           bindingPhone({
					//               code: loginRes.code,
					//               encryptedData: e.mp.detail.encryptedData,
					//               iv: e.mp.detail.iv
					//             })
					//             .then(res => {
					//               // this.User();
					//               this.$store.dispatch("userInfo", true);
					//               uni.hideLoading();
					//               uni.showToast({
					//                 title: res.msg,
					//                 icon: "success",
					//                 duration: 2000
					//               });
					//             })
					//             .catch(error => {
					//               uni.hideLoading();
					//               this.$store.dispatch("userInfo", true);
					//               console.log(error);
					//               uni.showToast({
					//                 title: error.msg ||
					//                   error.response.data.msg ||
					//                   error.response.data.message,
					//                 icon: "none",
					//                 duration: 2000
					//               });
					//             });
					//         },
					//         fail() {
					//           reject("绑定失败");
					//         }
					//       });
					//     }
					//   },
					//   fail() {
					//     reject("获取环境服务商失败");
					//   }
					// });
				} else {
					uni.showToast({
						title: '已拒绝授权',
						icon: 'none',
						duration: 2000,
					})
				}
			},
			// 获取用户授权，读取头像、昵称
			getUserInfo(data) {
				if (data.detail.errMsg == 'getUserInfo:fail auth deny') {
					uni.showToast({
						title: '取消授权',
						icon: 'none',
						duration: 2000,
					})
					return
				}
			},
			// 申请获取用户信息
			getUserInfoProfile(data) {
				wx.getUserProfile({
					lang: 'zh_CN',
					desc: '需要获取您的信息用来展示',
					success: res => {
						uni.showLoading({
							title: '正在更新信息...',
							duration: 2000,
						})
						getProvider().then(provider => {
							// 环境提供商
							if (!provider) {
								reject()
							}
							// 获取开发code
							uni.login({
								provider: provider,
								success: async loginRes => {
									wxappGetUserInfo({
										encryptedData: res.encryptedData,
										iv: res.iv,
										code: loginRes.code, // 开发code
									}).then(res => {
										if (res.status === 200) {
											this.userInfo.avatar = res.data.avatar
											this.userInfo.nickname = res.data
												.nickname
										} else {
											uni.showLoading({
												title: res.msg,
												duration: 2000,
											})
										}
									})
								},
							})
						})
					},
				})
			},
			changeswitch(data) {
				this.switchActive = data
			},
			// 获取用户信息
			MenuUser() {
				getMenuUser()
					.then(res => {
						uni.hideLoading()
						this.MyMenus = res.data.routine_my_menus
					})
					.catch(error => {
						uni.hideLoading()
						console.log(error)
					})
			},
			goPages(index) {
				let url = this.MyMenus[index].uniapp_url
				if (url === '/pages/user/promotion/UserPromotion/index' && this.userInfo.statu === 1) {
					if (!this.userInfo.isPromoter) {
						uni.showToast({
							title: '您还没有推广权限！！',
							icon: 'none',
							duration: 2000,
						})
						return
					}
				}

				if (url === '/pages/orderAdmin/OrderIndex/index' && !this.userInfo.adminid) {
					uni.showToast({
						title: '您还不是管理员！！',
						icon: 'none',
						duration: 2000,
					})
					return
				}
				console.log(this.userInfo)
				if (url === '/pages/orderAdmin/OrderCancellation/index' && !this.userInfo.checkStatus) {
					uni.showToast({
						title: '您没有核销权限,请后台店员设置！！',
						icon: 'none',
						duration: 2000,
					})
					return
				}

				this.$yrouter.push({
					path: this.MyMenus[index].uniapp_url,
				})
			},
			goPages2() {
				this.$yrouter.push({
					path: '/pages/shop/GoodsList/index',
					query: {
						// id: 0,
						title: '积分商城',
						isIntegral: true,
					},
				})
			},
		},
		watch: {
			userInfo() {
				this.MenuUser()
			},
		},
		onShow() {
			if (this.$store.getters.token) {
				//
				uni.showLoading({
					title: '加载中',
				})
				this.$store.dispatch('getUser', true)
				this.MenuUser()
				this.isWeixin = isWeixin()
			}
		},
		onHide() {
			console.log('离开用户中心')
			this.updateAuthorizationPage(false)
		},
	}
</script>

<style lang="less">
	img {
		width: 100%;
		height: 100%;
	}

	* {
		margin: 0;
		padding: 0;
		color: #171717;
	}

	.container {
		overflow-y: auto;

		.top {

			padding: 10rpx 30rpx 0 30rpx;
			background: linear-gradient(180deg, #E4F0FF 0%, #F6F6F6 100%);

			.biaoti {
				text-align: center;
				font-size: 34rpx;
				color: #333333;
				margin: 24rpx 0;
			}

			.info {
				position: relative;
				display: flex;
				margin-top: 46rpx;
				margin-bottom: 32rpx;

				.icon-shezhi {
					position: absolute;
					right: 0rpx;
					top: 10rpx;
				}

				.left {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					border-radius: 50%;
					background-color: #ccc;
				}

				.right {
					flex: 1;
					padding-left: 32rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.user-name{
						display: flex;
						align-items: center;
					}
					.name {
						font-size: 36rpx;
						font-weight: bold;
						color: #171717;
						line-height: 42rpx;
						margin-right: 18rpx;
					}

					.huiyuan {
						width: 115rpx;
						height: 38rpx;
						padding: 0 12rpx;
						border-radius: 10rpx;
						background: linear-gradient(-90deg, #ECBD7F, #F5D2A3, #FFE8C9);
						color: #A76C1D;
						line-height: 38rpx;
						text-align: center;
						font-size: 22rpx;


					}

					.detial {
						margin-top: 30rpx;
						font-size: 28rpx;
						line-height: 44rpx;
						color: #868D93;

						.flex-jigou {
							display: flex;

							.flex-label {
								width: 148rpx;
								color: #868D93;
								flex-shrink: 0;
							}

							.flex-value {
								flex: 1;
								color: #868D93;
							}
						}
					}


				}
			}

			// 公共盒子
			.item-box {

				margin: 20rpx 0;
				padding: 40rpx 26rpx 40rpx 40rpx;
				border-radius: 24rpx;
				background-color: #fff;
				font-size: 28rpx;

				// 头部 标题
				.header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					// 左边标题内容
					.left {
						font-size: 32rpx;
						font-weight: bold;
					}

					// 右边按钮样式
					.right {
						display: flex;
						align-items: center;
						.pic {

							width: 12rpx;
							height: 22rpx;
							margin-left: 23rpx;
							line-height: 22rpx;
						}
					}

				}

				// 盒子身体
				.bd {
					display: flex;
					justify-content: space-around;
					margin-top: 50rpx;

					// 每一项按钮样式
					.item {
						text-align: center;

						.pic {
							width: 60rpx;
							height: 60rpx;
							margin: 0 auto;
							margin-bottom: 28rpx;

						}

						.text {
							font-weight: bold;
						}

					}
				}


			}
		}
	}

	.getUserBaseData {
		.userDataBtn {
			width: 80%;
			height: 80rpx;
			background: linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
			background: -moz-linear-gradient(to right, #f35447 0%, #ff8e3c 100%);
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
	}

	.footer-line-height {
		height: 1 * 100rpx;
	}

	.order-status-num {
		min-width: 0.33 * 100rpx;
		background-color: #fff;
		color: #eb3729;
		border-radius: 15px;
		position: absolute;
		right: -0.14 * 100rpx;
		top: -0.15 * 100rpx;
		font-size: 0.2 * 100rpx;
		padding: 0 0.08 * 100rpx;
		border: 1px solid #eb3729;
	}

	.pictrue {
		position: relative;
	}

	.switch-h5 {
		margin-left: 0.2 * 100rpx;
	}

	.binding {
		margin-top: 0.1 * 100rpx;
		display: inline-block;
		padding: 0.05 * 100rpx 0.2 * 100rpx;
		background-color: #ca1f10;
		border-radius: 50px;
		font-size: 0.22 * 100rpx;
		line-height: 1.5;
		border: 1px solid #e8695e;
		color: #ffffff;
	}

	.by {
		text-align: center;
		padding: 30rpx 0;
	}

	.by-text {
		text-align: center;
		font-size: 24rpx;
	}
</style>
